<!doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="qrc:/html/jquery.min.js"></script>
  <link href="qrc:/html/xterm.min.css" rel="stylesheet">
  <link href="qrc:/html/fullscreen.min.css" rel="stylesheet">
  <script src="qrc:/html/xterm.min.js"></script>
  <script src="qrc:/html/fullscreen.min.js"></script>
  <script src="qrc:/html/fit.min.js"></script>
  <script type="text/javascript" src="qrc:/html/qwebchannel.js"></script>
  <style>
    ::-webkit-scrollbar {
      width: 0px;
    }
  </style>
</head>

<body style="padding: 0;margin: 0;">
  <div id="terminal" style="padding: 0;margin: 0;"></div>
</body>
<script type="text/javascript">
  
  new QWebChannel(qt.webChannelTransport, function(channel) {
      window.core = channel.objects.core
  })

  var clientId
  var body_height = $(document).height() - 20;
  var body_width = $(document).width();
  $("#terminal").height(body_height);
  Terminal.applyAddon(fullscreen);
  Terminal.applyAddon(fit);

  var term = new Terminal({
    termName: "xterm",
    useStyle: true,
    convertEol: true,
    screenKeys: true,
    cursorBlink: true,
    visualBell: true,
    colors: Terminal.xtermColors,
    // rendererType: "canvas",
    // theme: {
    //     foreground: "#7e9192", //字体
    //     background: "#002833", //背景色
    //     cursor: "help", //设置光标
    //     lineHeight: 16
    //   }
  });
  term.open(document.getElementById('terminal'));
  term.fit();
  term.focus();
  term.scrollToBottom()
  term.on('data', (data) => {
    core.recieveJsMessage(data);
  });

  term.on('resize', function () {

  })

  function lineFeed() {
    term.write('\r\n ');
  }


  window.onresize = function () {
    var body_height = $(window).height() - 20;
    $("#terminal").height(body_height);
    term.fit()
    term.scrollToBottom()
    requestPtySize()
  }

  function getRowsAndCols() {
    let height = $("#terminal").height();
    let rows = parseInt(height / 18);

    var span = $("<span>", {
      text: "qwertyuiopasdfghjklzxcvbnm"
    });
    $("#terminal").append(span);
    var span_width = span.width()
    var span_height = span.height()
    span.remove();

    let width = document.body.clientWidth;
    let cols = parseInt(width / (span_width / 21))
    return {
      rows: rows,
      cols: cols
    }
  }

  function requestPtySize() {
    let rc = getRowsAndCols()
    var ss = rc.rows + "," + rc.cols
    if (core != undefined) {
      core.setChannelRequestPtySize(ss)
    }
  }

  function setClientId(cId){
    clientId=cId
    open_websocket()
    core.ssh2connect("")
  }

  function open_websocket() {
      if (location.search != "")
          var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/\.]+)/.exec(location.search)[1]);
      else
          var baseUrl = "ws://localhost:12345";

      var socket = new WebSocket(baseUrl);

      socket.onclose = function() {
          console.error("web channel closed");
      };
      socket.onerror = function(error) {
          console.error("web channel error: " + error);
      };
      socket.onopen = function() {
          socket.send(clientId);
      }
      socket.onmessage=function(evt){
        var received_msg = evt.data
        term.write(received_msg)
      }
  }
</script>

</html>